<template>
  <div id="role_manage" class="container">
    <div class="content">
      <div class="title_tab">
        <div
          class="title_item"
          :class="{title_active:menu == 2}"
          @click="selectTab(2)"
        >角色项</div>
        <div
        style="margin-left:0.3rem;"
          class="title_item"
          v-if="isHasAdd"
          :class="{title_active:menu == 1}"
          @click="selectTab(1)"
        >角色组</div>
      </div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <!-- <el-select
              v-model="tabledisplayObj.orgId"
              style="width:1.8rem;"
              clearable
              placeholder="请选择角色项名称"
            >
              <el-option v-for="(row,index) in selectOrgList" :key="index"  :label="row.orgName" :value="row.orgId" ></el-option>
            </el-select>-->
            <el-select
              v-show="menu == 2"
              v-model="roleModeIndex"
              placeholder="选择角色级别"
              style="width:1.8rem;"
              clearable
              @change="roleModeChange"
            >
              <el-option
                v-for="item in roleModeList"
                :key="item.label"
                :label="item.label"
                :value="item.index"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 名称"
              v-model="searchText"
              class="input_search"
              clearable
            ></el-input>
            <div class="search_btn" style="margin-left:0.1rem;" @click="searchCourse()">搜索</div>
            <div class="btn_user_defined" style="margin-left:0.1rem;" @click="cancleBtn()">重置</div>
            <div class="right_btn" @click="openGroupAdd" v-if="menu == 1">新&nbsp&nbsp增</div>
            <div
              class="right_btn"
              @click="openAdd"
              v-else-if="hasApi('roleAdd') && menu == 2"
            >新&nbsp&nbsp增</div>
          </div>
        </div>

        <el-row v-if="menu == 1 && isHasAdd">
          <el-row style=" text-align: center;margin-top:0.25rem">
            <el-col :span="6">
              <div class="grid-content bg-purple">角色组名称</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">角色项</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">操作</div>
            </el-col>
          </el-row>
          <div class="student_li" v-if="roleList" v-for="item in roleGroupList">
            <div class="li_body1">
              <el-row>
                <el-col
                  :span="6"
                  style=" text-align: center;padding-top:0.12rem;"
                >{{item.roleGroupName}}</el-col>
                <el-col
                  :span="12"
                  style=" text-align: center;padding-top:0.12rem;"
                >{{item.roleGroupListName}}</el-col>
                <el-col :span="6" style=" text-align: center;padding-top:0.06rem;">
                  <el-button
                    class="btn_editor"
                    @click="handleGroupEdit(item)"
                    style="color:#409EFF;border: 0"
                  >编辑</el-button>
                  <el-button
                    class="btn_editor"
                    @click="handleGroupDelete(item)"
                    style="color:#F56C6C;border: 0"
                  >删除</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <el-row v-else>
          <div>
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 1rem;">序号</td>
                  <td style="width: 3rem;">角色项名称</td>
                  <td style="width: 2rem;">角色级别</td>
                  <td style="width: 2rem;">创建人</td>
                  <td style="width: 3rem;">创建人角色</td>
                  <!-- <td style="width: 3rem;">创建校区</td> -->
                  <td style="width: 3rem;">创建时间</td>
                  <td style="width: 3rem;">修改时间</td>
                  <td style="width: 3rem;">操作</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in roleList">
                  <td>{{index+1}}</td>
                  <td>{{item.roleName}}</td>
                  <td>{{item.roleModeName}}</td>
                  <td>{{item.createUserName}}</td>
                  <td>{{item.createUserRoleName}}</td>
                  <!-- <td>{{item.roleName}}</td> -->
                  <td>{{item.createTime}}</td>
                  <td>{{item.updateTime}}</td>
                  <td>
                    <span
                      v-if="hasApi('roleListPage')"
                      class="operate_btn"
                      style="color:#67C23A;"
                      @click="handleLook(index,item)"
                    >查看</span>
                    
                    <span v-if="item.isEditable != 0 && hasApi('roleUpdate')" class="operate_btn" @click="handleEdit(index,item)">&nbsp;编辑</span>
                    <span
                      v-if="item.isEditable != 0 && hasApi('roleDetele')"
                      class="operate_btn"
                      @click="handleDelete(index,item)"
                    >&nbsp;删除</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- <el-row style=" text-align: center;margin-top:0.25rem">
            <el-col :span="3">
              <div class="grid-content bg-purple">角色项名称</div>
            </el-col>
            <el-col :span="17">
              <div class="grid-content bg-purple">对应权限列表</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">操作</div>
            </el-col>
          </el-row>
          <div class="student_li" v-if="roleList" v-for="item in roleList">
            <div class="li_body">
              <el-row>
                <el-col :span="3" style=" text-align: center;margin-top:0.8rem;">{{item.roleName}}</el-col>
                <el-col :span="17" class="active">{{item.menuName}}</el-col>
                <el-col :span="4" style=" text-align: center;margin-top:0.6rem;">
                  <el-button
                    v-if="hasApi('roleListPage')"
                    @click="handleLook(item)"
                    style="color:#409EFF;border: 0"
                  >查看</el-button>
                  <el-button
                    v-if="item.isEditable != 0 && hasApi('roleUpdate')"
                    class="btn_editor"
                    @click="handleEdit(item)"
                    style="color:#409EFF;border: 0"
                  >编辑</el-button>
                  <el-button
                    v-if="item.isEditable != 0 && hasApi('roleDetele')"
                    class="btn_editor"
                    @click="handleDelete(item)"
                    style="color:#F56C6C;border: 0"
                  >删除</el-button>
                </el-col>
              </el-row>
            </div>
          </div>-->
        </el-row>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <roleAdd ref="roleAdd" @callback="closeAdd"></roleAdd>
    <roleLook ref="roleLook" @callback="closeLook"></roleLook>
    <rolegroupAdd ref="rolegroupAdd" @callback="closeAdd"></rolegroupAdd>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import roleAdd from "./subpage/role_add";
import roleLook from "./subpage/role_look";
import rolegroupAdd from "./subpage/rolegroup_add";
var vm;
let user;
export default {
  components: {
    roleAdd,
    roleLook,
    rolegroupAdd
  },
  data() {
    return {
      menu: 1,
      isHasAdd: false,
      isShowSearch: false,
      searchText: "", //搜索框输入文本
      selectOrgList: [],
      tabledisplayObj: {
        currentPage: 1,
        size: 10,
        roleMode: "",
        childRoleMode: "",
        total: 0
      },
      roleList: [],
      roleGroupList: [],
      roleModeIndex: "",
      roleModeList: []
    };
  },
  methods: {
    cancleBtn(){
      vm.tabledisplayObj={
        currentPage: 1,
        size: 10,
        roleMode: "",
        childRoleMode: "",
        total: 0
      };
      vm.searchText = "";
      vm.initData();
    },
    roleModeChange(val) {
      console.log(val);
      if(val == "") {
        vm.tabledisplayObj.roleMode ="";
        vm.tabledisplayObj.childRoleMode ="";
        return;
      }
      let roleModeItem = vm.roleModeList[vm.roleModeIndex];
      vm.tabledisplayObj.roleMode =
        roleModeItem.parentValue == null
          ? roleModeItem.value
          : roleModeItem.parentValue;
      vm.tabledisplayObj.childRoleMode =
        roleModeItem.parentValue == null ? null : roleModeItem.value;
        console.log(vm.tabledisplayObj.roleMode,vm.tabledisplayObj.childRoleMode);
    },
    /**
     * 点击删除
     */
    handleGroupDelete(item) {
      var paras = {
        roleGroupId: item.roleGroupId + ""
      };
      this.$confirm("此操作将删除该角色组, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          api.rolegroupDelete(paras).then(function(data) {
            console.log(data);
            if (data.resultCode == 2000) {
              vm.$message({
                message: "删除成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    handleGroupEdit(item) {
      let data = JSON.parse(JSON.stringify(item));
      vm.$refs.rolegroupAdd.init(data);
    },
    openGroupAdd() {
      vm.$refs.rolegroupAdd.init({});
    },
    selectTab(index) {
      vm.menu = index;
      vm.tabledisplayObj = {
        currentPage: 1,
        size: 10,
        roleMode: "",
        childRoleMode: "",
        total: 0
      };
      vm.searchText = "";
      vm.initData();
    },
    /**
     * 初始化数据
     */
    initData() {
      if (vm.menu == 1) {
        let paras = {
          currPage: this.tabledisplayObj.currentPage,
          pageSize: this.tabledisplayObj.size,
          roleGroupName: this.searchText
        }; //设置参数
        this.getGroupData(paras);
      } else {
        let paras = {
          currPage: this.tabledisplayObj.currentPage,
          pageSize: this.tabledisplayObj.size,
          roleName: this.searchText,
          roleMode: this.tabledisplayObj.roleMode,
          childRoleMode: this.tabledisplayObj.childRoleMode
        }; //设置参数
        this.getData(paras);
      }
    },
    pageSizeChange: function(val) {
      //页条数发生改变
      this.tabledisplayObj.size = val;
      this.initData();
    },
    campusChange: function(campusId) {
      this.initData();
    },
    getGroupData(paras) {
      api.getRoleListPage(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.roleGroupListName = "";
            if (item.roleGroupSetList != null) {
              item.roleGroupSetList.forEach(elem => {
                item.roleGroupListName +=
                  item.roleGroupListName == ""
                    ? elem.roleName
                    : "," + elem.roleName;
              });
            }
          });
          vm.roleGroupList = data.list;
           vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
      if (user.roleMode == 2) {
        paras.campusId = vm.$store.state.campusId;
      }
      let roleListTemp = []; //临时存放list
      api.roleListPage(paras).then(function(data) {
        if (data.resultCode == 2000) {
          roleListTemp = data.list;
          for (let i = 0; i < roleListTemp.length; i++) {
            if (roleListTemp[i].childRoleMode == null) {
              vm.roleModeList.forEach(item => {
                if (
                  item.value == roleListTemp[i].roleMode &&
                  item.parentValue == null
                ) {
                  roleListTemp[i].roleModeName = item.label;
                }
              });
            } else {
              vm.roleModeList.forEach(item => {
                if (
                  item.value == roleListTemp[i].childRoleMode &&
                  item.parentValue == roleListTemp[i].roleMode
                ) {
                  roleListTemp[i].roleModeName = item.label;
                }
              });
            }
          }
          vm.tabledisplayObj.total = data.totalCount;
          vm.roleList = roleListTemp;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    handleLook(index, item) {
      // let data = JSON.parse(JSON.stringify(item));
      // vm.$refs.roleLook.init(data);
      console.log(item);
      var path = vm.$store.state.permit["100"].path;
      //传递参数
      vm.$router.push({
        path: path,
        query: {
          roleId: item.roleId,
          isLook: 1
        }
      });
    },
    handleEdit(index, item) {
      // let data = JSON.parse(JSON.stringify(item));
      // vm.$refs.roleAdd.init(data);
      console.log(item);
      var path = vm.$store.state.permit["100"].path;
      //传递参数
      vm.$router.push({
        path: path,
        query: {
          roleId: item.roleId,
          isLook: 2
        }
      });
    },
    /**
     * 点击删除
     */
    handleDelete(index,item) {
      var paras = {
        roleId: item.roleId + ""
      };
      console.log(item);
      this.$confirm("此操作将删除该角色, 是否继续?</br>角色项名称："+item.roleName+"</br>角色级别："+item.roleModeName, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString: true,
        type: "warning",
        center: true
      })
        .then(() => {
          api.roleDetele(paras).then(function(data) {
            console.log(data);
            if (data.resultCode == 2000) {
              vm.$message({
                message: "删除成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    openAdd() {
      vm.$refs.roleAdd.init({});
    },
    closeLook(data) {},
    closeAdd(data) {
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currentPage = val;
      this.initData();
    },
    /**
     * 搜索
     */
    searchCourse() {
      this.tabledisplayObj.currentPage = 1;
      this.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    if (user.roleMode == 0) {
      vm.isHasAdd = true;
      vm.menu = 2;
    } else {
      vm.menu = 2;
    }
    api.listRoleMode().then(function(datas) {
      for (let i = 0; i < datas.list.length; i++) {
        if (datas.list[i].value < user.roleMode) {
          datas.list[i].disabled = true;
        } else {
          datas.list[i].disabled = false;
        }
        if (
          (user.roleMode == 0 || user.roleMode == 1) &&
          datas.list[i].parentValue
        ) {
          datas.list[i].disabled = false;
        }

        if (user.roleMode == 2 && datas.list[i].parentValue) {
          datas.list[i].disabled = true;
        }
      }
      vm.roleModeList = datas.list;
    });
    this.initData();
  },
  computed: {}
};
</script>
<style lang="scss">
#role_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .title_tab {
    display: flex;
  }
  .title_item {
    font-size: 0.24rem;
    color: #999999;
    text-shadow: 0.01rem 0 0 currentcolor;
    line-height: 0.6rem;
    cursor: pointer;
  }
  .title_active {
    color: #141414;
  }
  .student_li {
    width: 100%;
    cursor: pointer;
    margin-top: 0.2rem;
    background: #ffffff;
    border-radius: 0.1rem;
    border: 1px solid #ededed;
    .li_body {
      width: 100%;
      padding: 0.12rem;
      .active {
        height: 1.7rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        overflow: hidden;
      }
      .el-button {
        padding: 0.2rem 0.1rem;
        font-size: 0.16rem;
      }
    }
    .li_body1 {
      width: 100%;
      height: 0.5rem;
      .el-button {
        font-size: 0.16rem;
      }
    }
  }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #d3dce6;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #d3dce6;
  }
  .grid-content {
    line-height: 0.5rem;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #d3dce6;
  }
  .el-button + .el-button {
    margin-left: 0rem;
  }

  .noShow {
    visibility: hidden;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>